import React, { Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
// 导入路由导航守卫组件
import AuthRoute from '@/components/AuthRoute'
// 导入组件
const Login = React.lazy(() => import('@/pages/Login'))
const Layout = React.lazy(() => import('@/pages/Layout'))
const NotFound = React.lazy(() => import('@/pages/NotFound'))
const Home = React.lazy(() => import('@/pages/Home'))
const Question = React.lazy(() => import('@/pages/Question'))
const Video = React.lazy(() => import('@/pages/Video'))
const Profile = React.lazy(() => import('@/pages/Profile'))
const ProfileEdit = React.lazy(() => import('@/pages/Profile/Edit'))
const ProfileChat = React.lazy(() => import('@/pages/Profile/Chat'))
function App() {
  return (
    <Router>
      <div className="app">
        <Suspense fallback={<div>loading...</div>}>
          {/* 一级路由 */}
          <Routes>
            {/* 首页布局 */}
            <Route path="/" element={<Layout />}>
              {/* 二级路由配置 */}
              {/* 首页 */}
              {/* index代表默认加载的组件路由 */}
              <Route index element={<Home />}></Route>
              {/* 问答 */}
              <Route path="/question" element={<Question />}></Route>
              {/* 视频 */}
              <Route path="/video" element={<Video />}></Route>
              {/* 个人中心 */}
              <Route
                path="/profile"
                element={
                  <AuthRoute>
                    <Profile></Profile>
                  </AuthRoute>
                }
              ></Route>
            </Route>
            {/* 个人详情页面 */}
            <Route
              path="/profile/edit"
              element={
                <AuthRoute>
                  <ProfileEdit></ProfileEdit>
                </AuthRoute>
              }
            ></Route>
            {/* 小智同学 */}
            <Route
              path="/chat"
              element={
                <AuthRoute>
                  <ProfileChat></ProfileChat>
                </AuthRoute>
              }
            ></Route>

            {/* 登录 */}
            <Route path="/login" element={<Login></Login>}></Route>
            {/* 404 */}
            <Route path="*" element={<NotFound></NotFound>}></Route>
          </Routes>
        </Suspense>
      </div>
    </Router>
  )
}

export default App
